/**
 * Created by HX on 2016/11/2.
 */
/**
 * Data 最大的组件.
 */
var React = require('react');
var DataTable = require('./DataTable');

// with es5
var ReactDOM = require('react-dom');
var ReactBsTable  = require('react-bootstrap-table');
var BootstrapTable = ReactBsTable.BootstrapTable;
var TableHeaderColumn = ReactBsTable.TableHeaderColumn;



var Data = React.createClass({
    getInitialState : function (){ //定义为State
        return{
            DataList : [] //为空的数组
        }
    },
    listData : function(){//获取数据
        $.ajax({
            type : 'get',
            url : '/list'
        }).done(function(resp){
            if(resp.status == "success"){
                this.setState({DataList:resp.aaData});
            }
        }.bind(this))
    },
    updateData : function(id,status){//更新status数据
        $.ajax({
            type : 'post',
            url : '/update',
            data : {id:id,status:status}
        }).done(function(resp){
            if(resp.status =="success"){//如果更新刷新一下列表
                this.listData();
            }
        }.bind(this))
    },
    addData : function(content){//添加数据
        $.ajax({
            type : 'post',
            url : '/add',
            data : {content:content}
        }).done(function(resp){
            if(resp.status =="success"){//如果添加成功刷新一下列表
                this.listData();
            }
        }.bind(this))
    },
    deleteData : function(id){//删除数据
        $.ajax({
            type : 'post',
            url : '/delete/'+id
        }).done(function(resp){
            if(resp.status =="success"){//如果更新刷新一下列表
                this.listData();
            }
        }.bind(this))
    },
    componentDidMount : function () { //组件挂载后调用listData
        this.listData();
    },

    renderSizePerPageDropDown : function () {
        return (
          <SizePerPageDropDown
            className='my-size-per-page'
            btnContextual='btn-warning'
            variation='dropup'
            />
        );
      },
    handleDeletedRow: function(rowKeys) {
        //console.log('delete'+ rowKeys);
        this.deleteData(rowKeys);
    },
    handleRowClick: function(rowKeys) {
        console.log('RowClick'+ rowKeys)
    },
    actionFormatter: function(cell, row){//action 按钮
        return <DataTable
            updateData={this.updateData}
            action={ row }/>;
    },
    render : function(){

        const options = {
            clearSearch: true,
            sizePerPageDropDown: this.renderSizePerPageDropDown,//每一页显示多少数据
            afterDeleteRow: this.handleDeletedRow//删除按钮
            //onRowClick: this.handleRowClick,
        };
        const selectRow = {
            mode: 'checkbox'
            //clickToSelect: true
        };
        const cellEditProp = {
            mode: 'click',
            blurToSave: true
        };
        return (
            <BootstrapTable
                data={ this.state.DataList }
                options={ options }
                selectRow={ selectRow }
                cellEdit={ cellEditProp }
                pagination={ true }  striped={ true } hover={ true } condensed={ true } search deleteRow>
                <TableHeaderColumn hidden={true} dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
                <TableHeaderColumn editable={ { type: 'textarea' } } dataField='content' >Name</TableHeaderColumn>
                <TableHeaderColumn editable={ false } dataField='status'>Status</TableHeaderColumn>
                <TableHeaderColumn editable={ false } dataField='mac'>Mac</TableHeaderColumn>
                <TableHeaderColumn dataField='action'
                   editable={ false }
                   dataFormat={ this.actionFormatter }
                   export={ false }>Action</TableHeaderColumn>
            </BootstrapTable>
        )
    }
});

module.exports = Data;
